<!DOCTYPE html>
<html>
    <head>
        <title>qq空间相册</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding: 0;list-style-type: none;}
            #div1{width:810px;height: 580px;border:5px solid #000;margin: 0 auto;}
            #div2{width:800px;height: 450px;border:5px solid #f00;overflow:hidden;}
            #div2 img{width:100%}
            #div3{width: 800px;height:110px;border:5px solid #f00;overflow:hidden;position: relative;}
            #div3 div{ height: 110px;margin: 0 auto;width: 720px; }
            #div3 ul{width: 1600px;height:110px;}
            li{width:160px;height:90px;border:5px solid #fff;overflow:hidden;float: left;margin: 5px;cursor: pointer;}
            li:hover {width:170px;height:100px;border:none;}
            #div3 img{width:100%;height: 100%;}
            #div3 a{width:40px;height:110px;background: #ccc;color: #ff0;text-align: center;font-size: 16px;line-height: 110px;text-decoration: none}
            .left{position: absolute;left:0;top:0;}
            .right{position: absolute;right:0;top:0;}
            .relect{width:170px;height:100px;border:none;}
        </style>
    </head>
    <body>
        <div id='div1'>
            <div id='div2'><img src="img/1.jpg" alt=""></div>
            <div id='div3'>
                <div>
                    <ul>
                        <li class="relect"><img src="img/1.jpg" alt=""></li>
                        <li><img src="img/2.jpg" alt=""></li>
                        <li><img src="img/3.jpg" alt=""></li>
                        <li><img src="img/4.jpg" alt=""></li>
                        <li><img src="img/5.jpg" alt=""></li>
                        <li><img src="img/6.jpg" alt=""></li>
                        <li><img src="img/7.jpg" alt=""></li>
                        <li><img src="img/8.jpg" alt=""></li>
                    </ul>
                </div>
                <a href="javascript:;" class="left">left</a>
                <a href="javascript:;" class="right">right</a>
            </div>
            <script src="js/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                var index = 0;
                var tick;
                var w = $("ul li").outerWidth(true);
                $("ul li").click(function () {
                    index = $(this).index();
                    var src = $(this).children().attr("src");
                    $("#div2 img").attr({"src": src});
                    $(this).addClass("relect").siblings().removeClass("relect"); 
                });
                $(".left").click(function(){
                    index--;
                   if(index<0){
                         index=7;
                       $("ul").stop().animate({"margin-left":-w*4});
                       $("ul li").eq(index).click();
                   }else 
                   if(index>-1&&index<5){
                        $("ul").stop().animate({"margin-left":-w*index});
                        $("ul li").eq(index).click();
                   }else 
                   if(index>3&&index<7){
                       $("ul").stop().animate({"margin-left":-w*4});
                        $("ul li").eq(index).click();
                   }else
                    if(index>7){
                    index=0;
                   $("ul").stop().animate({"margin-left":0});
                    $("ul li").eq(index).click();
                   }
        });
        $(".right").click(function(){
            index++;
            if(index<0){
                         index=7;
                       $("ul").stop().animate({"margin-left":-w*4});
                       $("ul li").eq(index).click();
                   }else 
                   if(index>-1&&index<5){
                        $("ul").stop().animate({"margin-left":-w*index});
                        $("ul li").eq(index).click();
                   }else 
                   if(index>3&&index<8){
                       $("ul").stop().animate({"margin-left":-w*4});
                        $("ul li").eq(index).click();
                   }else
                    if(index>7){
                    index=0;
                   $("ul").stop().animate({"margin-left":0});
                    $("ul li").eq(index).click();
                   }
        });
        tick=setInterval(function(){$(".left").click();},1000);
        
                $("#div1").hover(function(){
                  clearInterval(tick);  
                },function(){
                   tick=setInterval(function(){$(".left").click();},1000);  
                });
            </script>
        </div>
    </body>
</html>
